תמיד שאלתם את עצמכם כיצד שולחים פרטים לשרת ללא רענון הדף? נענה אל הכל!
לא מזמן פנו אלי מספר אנשים ושאלו אותי את השאלה: "כיצד אני שולח נתונים לשרת ללא רענון הדף?", היום אני רוצה לנות לכולם חד משמעית כיצד עושים זאת.
ובכן, יש כמה דרכים לעשות זאת ב AJAX, אחד בשימוש ב JS השני בשימוש JQUERY.
לפי דעתי הקוד של JQUERY הרבה הרבה יותר קצר!.
השוואה בין שני הקודים
ובכן, כמו שאמרתי קודם יש אפשרות לכתוב AJAX ב JQUERY וב JS.
הקוד של JS יותר ארוך מקוד JQUERY
קוד JS:
function AJAX(pram)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","page.php?p="+pram,true);
xmlhttp.send();
}
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","page.php?p="+pram,true);
xmlhttp.send();
}
קוד JQ:
function AJAX(pram)
{
$.get("page.php?p="+pram, function(result){
$("div").html(result);
});
}
{
$.get("page.php?p="+pram, function(result){
$("div").html(result);
});
}
נו מה אתם אומרים? לפי דעתכם מה יותר נוח? לפי דעתי JQuery
על מה המדריך בעצם?
טוב בגלל שיותר נוח לי(ולפי דעתי גם לכם) לכתוב קוד AJAX בעזרת JQuery שהיא בעצם ספריה של JS אני ילמד כיצד כותבים קוד AJAX יעיל ופשוט בעזרת JQuery
מה זה JQuery?
JQuery זאת בעצם ספריה של JS, ובשביל לעבוד איתה יש לעשות כמה צעדים:
1.להיכנס לאתר הרשמי של JQUERY ולהוריד את הגירסה הנוכחית, מי שלא מצליח להוריד שיעשה שמירה בשם ללינק הבא:שמור אותי!!
2.הוסיפו את JQuery לדף HTML,PHP... כך:
שימו את הקוד הבא ב HEADER של הדף או לאחר הסגירה של BODY:
<script type="text/javascript" src="jquery.js"></script>
jquery.js = שם הקובץ שלכם.
עוד אפשרות:
מי שאין לו רצון להוריד קבצים יכול להשתמש בקבצים המאוחסנים על ידי GOOGLE ומיקרוסופט ככה:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js"></script>
3.נבדוק שהכל פועל. הוסיפו את הקוד הבא מתחת לקישור ל JQuery:
<script type="text/javascript">
$(document).ready(function(){
$("body").html('hi from jquery');
});
</script>
$(document).ready(function(){
$("body").html('hi from jquery');
});
</script>
אם הדף שלכם מראה הודעת שלום מ-jquery אז הכל בסדר
מתחילים בקטן
נתחיל לכתוב את הקוד שלנו..
נתחיל בזה שנילמד להוסיף(לייבא) קבצים לתוך הדף ללא שום רענון.
JQuery מציאה לנו אל הפונקציה load שלמעשה, כפי שנשמע, טוענת משהו (קובץ שנומר לה לטעון).
למעשה היא לא תיטען לנו קוד PHP אלה את הפלט שלו.
נגיד יש לי את הקובץ ajax.php, תכולת הקובץ היא:
<?php
function AJAX()
{
return "I am a Ajax code";
}
echo AJAX();
?>
function AJAX()
{
return "I am a Ajax code";
}
echo AJAX();
?>
עכשיו, AJAX יטען את הפלט של הקוד(תבצע ותחזיר תשובה - פלט).
לדוגמא הקובץ שהבאתי למעלה מחזיר "I am a Ajax code".
עכשיו אתם שואלים מה אני מבלבל לכם ת'מוח למה אתה לא עובר לשורש העניין?
טוב נו אני ירחם אליכם :P
טוב עכשיו נגיד אני רוצה לטעון את הפלט של הקובץ לתוך דיב בשם(id) Ajax.
אוקיי אנו רושמים דולר($) לאחר מכן נשים סוגרים(()) ובתוכם נשים מרכאות.
בתוך המרכאות רושמים את ה selector(שם הדיב בתוספת . OR #, .=class #=id).
ככה:
$("#ajax")
נוסיף לאחר מכן נקודה +שם הפונקציה ובסוגרים נרשום את שם הקובץ שברצוננו ליבא:
<script type="text/javascript">
$(document).ready(function(){
$("#ajax").load('ajax.php');
});
</script>
$(document).ready(function(){
$("#ajax").load('ajax.php');
});
</script>
עכשיו נוסיף לדף שלנו DIV בשם ajax:
<div id="ajax"></div>
פלט:"I am a Ajax code".
כמובן שלא חייב לייבא קובץ PHP אפשר כל קובץ למשל:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ajax").load('ajax1.html');
});
</script>
</head>
<body>
<div id="ajax"></div>
</body>
</html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ajax").load('ajax1.html');
});
</script>
</head>
<body>
<div id="ajax"></div>
</body>
</html>
שלום אני טקסט יפה ופשוט בקובץ ajax1.html :P
פלט:"שלום אני טקסט יפה ופשוט בקובץ ajax1.html :P".
מה למדנו?
טוב לא למדנו הרבה..
1.למדנו להוסיף לקובץ שלנו אפשרות JQuery
2.למדנו ממש בקטנה מה זה JQuery
3.למדנו אל האפשרות ש JQuery מציאה לנו:load
נתראה במדריך הבא :P
תגובות לכתבה:
כל הכבוד על הכתבה רפאל. המשיך כך.
אני כבר מחקה לחלק ב'.
--
אני מאוד ממליץ על שימוש בספריה באמצעות השרת של גוגל ולא להוריד את הקובץ ולשים באתר שלכם. לדפדפן יש זכרון מתמון מיוחד שמאפשר לו לשמור קבצים שהוא כבר הוריד בעבר ולא להוריד אותם עוד פעם. לכן עם נכנסתם לאתר הזה(שמשתמש בגוגל) - הדפדפן שלכם הוריד את הקובץ מהשרת של גוגל, שמר אותו, ופעם הבאה שתכנסו לאתר הזה או לכל אתר אחר שגם משתמש בגוגל - הקובץ יטען הרבה הרבה הרבה יותר מהר מהזכרון.
כל הכבוד רפאל. אלכס, פעם הבאה תעבור טיפה יותר על המאמר ותתקן בעיות איות.
בהצלחה ברפאל במאמרים הבאים, מקווה שהכתיבה שלך תשתפר.
וכן, ממליץ מאוד על Ajax בעזרת הספרייה jQuery, ובכללי אני ממליץ על הספרייה הזאת. ספרייה שמקצרת את העבודה בהמון.
שוב תודה רפאל.
חבל שיש טעויות של איות כמו "אל" במקום "על".
חח אני אששמח לעבוד טיפה אל דקדוק :P
תודה רבה, מדריך מעולה.
לא מומלץ בכלל להשתמש בJQ בשביל דבר פשוט כמו Ajax
חבל לייבא ספרייה ענקית בשביל משהו כל כך פשוט.
תודה רבה :]
יהונתן -> אתה טועה.
זה תלוי בצורך, קוד ajax יכול להתלכלך ולהפוך למאוד מורכב בזמן קצר. jquery היא ספריה מאוד חזקה שמכילה הרבה כלים טובים (עם סינטקס נוח) בשביל לעבוד בצורה יעילה. אם אתה רק רוצה לשלוח בקשת GET לשרת כלשהוא בשביל לקבל איזה json פשוט, אולי עדיף לך ליישם בעצמך ולכתוב קוד שיספק לך אובייקט שיעבוד ביותר מדפדפן אחד. אבל אם אתה רוצה לכתוב אפליקיית javascript מורכבת שעושה מאשר יותר בקשה אחת פשוטה אולי כדי לך לשקול להשתמש בספריה.
משאבי המחשב הם זולים, זמן מתכנתים יקר. אז במקום להמציא את הגלגל עדיף להשתמש בספריות החזקות הללו, אם המשתמשים שלך לא על dialup זה לא ישנה עבורם כמעט בכלל.
בקשר לגודל של JQUERY:
א. 90K זה לא גודל שהייתי מגדיר כ"ענק".
ב. מן הסתם כשאתה כותב משהו, לא תשתמש בJQUERY רק לדבר אחד. מאז שאני גליתי את הספריה אני משתמש בה כמעט לכל דבר: EVENT HANDLING, שינויים בCSS, שליטה בDOM - פשוט הכל...
כבר קשה למצוא אצלי PLAIN JAVASCRIPT.
מתי יש פרק ב'? אחלה מדריך
תודה תודה מדריך מעולה .
נחמד, הרבה תגובות שכחתי לגמרי אני אשב לכתוב חלק ב בימים הקרובים :P
יש מצב שחלק מהמדריך לא מעודכן ל JQ 1.8?
תודה רבה מאוד עזר לי!